<template>
  <!-- <div class="layout">
    <file-list menuName="/workspace" class="file-list" type="workspace" :url="url" :bizId="url" />
  </div> -->
  <div>
    <div class="handle">
      <!-- <a href="javascript:;" class="upload" @click="dagUpload"></a> -->
      <btn-upload @succeedOver="succeedOver" class="add-file-btn" type="workspace" :taskId="path" :bizId="bizId" />
      <a href="javascript:;" class="refresh" @click="dagRefresh"></a>
    </div>
    <div class="breadcrumb">
      <span v-for="(e, i) in paths" :key="i" class="item">
        <a href="javascript:;" @click="goNextNav(e, i)">{{ e.name }}</a>
        <span v-if="i < paths.length - 1">/</span>
      </span>
    </div>
    <dl class="file-lis">
      <!-- <dt> -->
        <!-- <span class="name">名称</span> -->
        <!-- <span class="size">文件大小</span> -->
      <!-- </dt> -->
      <dd v-for="(e, i) in tableData" :key="i">
        <span @click="goNext(e)" :class="['name', handleIcon(e.dir, e.suffix)]">{{ e.name }}</span>
        <!-- <span class="size">{{ formatFileSize(e.size) }}</span> -->
      </dd>
      <dd v-if="!tableData || tableData.length == 0" class="placeholder">暂无文件</dd>
    </dl>
  </div>
</template>

<script>
import { getPageFileList } from '@/api/file'
import { zipFormat, mediaFormat } from "@/utils/maps";
import btnUpload from './Uploader'

export default {
  name: 'notebookfile',
  data () {
    return {
      bizId: this.$route.query.canvas_id,
      tableData: [],
      path: '',
      myInfo: {},
      Pagedata: {},
      relative_path: '',
      paths:[
        {
          name: "workspace",
          relative_path: ''
        },
      ],
      info: {}
    }
  },
  activated () {

  },
  created () {
    
  },
  components: {
    btnUpload
  },
  methods: {
    async initParam(relative_path) {
      this.myInfo = await this.$myInfo(this)
      this.Pagedata = {
        biz_id: this.bizId,
        relative_path,
        type: 'workspace',
        user_id: this.myInfo.id,
        page_num: 1,
        page_size: 100,
      }
      return 
    },
    async getData() {
      let res = await getPageFileList(this.Pagedata)
      // let res2 = await getFileList(this.Pagedata)
      // console.log(res2)
      console.log(res)
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    handleIcon(dir, suffix) {
      if (dir) return "dir";
      if (zipFormat[suffix]) return "zip";
      if (mediaFormat[suffix] && mediaFormat[suffix] == "pic") return "pic";
      if (mediaFormat[suffix] && mediaFormat[suffix] == "video") return "video";
      if (mediaFormat[suffix] && mediaFormat[suffix] == "voice") return "voice";
      return "text";
    },
    goNext(e) {
      if (!e.dir) return
      let relative_path = e.path.replace(`/platform/${this.myInfo.id}/workspace/${this.bizId}`, '')
      this.paths.push({
        name: e.name,
        relative_path,
        dir: true
      })
      this.Pagedata.relative_path = relative_path
      this.getData()
    },
    goNextNav(e, i) {
      this.Pagedata.relative_path = e.relative_path
      let num = this.paths.length - i - 1;
      this.paths.splice(i + 1, num);
      this.getData()
    },
    formatFileSize(fileSize) {
      if (fileSize < 1024) {
        return fileSize + "B";
      } else if (fileSize < 1024 * 1024) {
        let temp = fileSize / 1024;
        temp = temp.toFixed(2);
        return temp + "KB";
      } else if (fileSize < 1024 * 1024 * 1024) {
        let temp = fileSize / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "MB";
      } else {
        let temp = fileSize / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "GB";
      }
    },
    succeedOver (data) {
      console.log(data)
      this.getData()
    },
    dagRefresh() {
      this.getData()
    },
  },
  watch: {

  },
  async mounted () {
    await this.initParam(this.relative_path)
    this.getData()
  },
  destroyed () {

  }
}
</script>

<style lang="less" scoped>
.handle{
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  height: 26px;
  padding-top: 10px;
  border-top: 1px solid #E4E7ED;
  border-bottom: 1px solid #E4E7ED;
  .add-file-btn{
    width: 16px;
    height: 16px;
  }
  .refresh{
    background: url(~@/assets/img/refresh.png) no-repeat;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
  }
}

.breadcrumb{
  overflow: hidden;
  padding-left: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .item{
    // float: left;
    span{
      margin: 0 4px;
    }
    a{
      color: #4285F4;
    }
  }
}
.file-lis{
  dt{
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    height: 32px;
    line-height: 32px;
    .name{
      padding-left: 0px;
    }
  }
  dd{
    // display: flex;
    // justify-content: space-between;
    height: 32px;
    line-height: 32px;

  }
  .name{
    padding-left: 32px;
    padding-right: 16px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .size{

  }
  .placeholder{
    text-align: center;
    display: block;
    width: 100%;
    padding-top: 40px;
  }
}
.dir {
  background: url(~@/assets/img/file-icon/dir.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.zip {
  background: url(~@/assets/img/file-icon/zip.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.pic {
  background: url(~@/assets/img/file-icon/pic.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.video {
  background: url(~@/assets/img/file-icon/video.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.voice {
  background: url(~@/assets/img/file-icon/voice.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.text {
  background: url(~@/assets/img/file-icon/text.png) no-repeat 6px center;
  background-size: 22px 22px;
}
</style>
